/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useRef } from 'react';
import { Card } from 'antd';
import ProTable from '@ant-design/pro-table';
import DragTable from '@/components/DragTable';
import { getAppCheckListByDevice } from '@/services/tools/appLoginCheck';
import { isArray, isEmpty } from 'lodash';
import { deviceColumns } from '../_utils';
import { randomCode } from '@base/utils';

const DeviceLoginList: React.FC<any> = (props) => {
  const { data } = props;
  const actionRef = useRef<any>();

  useEffect(() => {
    if (!isEmpty(data)) {
      actionRef.current.reload();
    } else {
      if (actionRef?.current?.reload) {
        actionRef.current.reload();
      }
    }
  }, [data]);

  const pagination = {
    pageSize: 10,
    showQuickJumper: false,
    showSizeChanger: false,
  };

  const getTableList = () => {
    if (!data?.id) {
      return Promise.resolve(() => {
        return {
          data: [],
          total: 0,
          success: true,
        };
      });
    }
    return getAppCheckListByDevice({ id: data.id }).then((res: any) => {
      const list =
        isArray(res.data) && res.data.length > 0
          ? res.data.map((item: any) => {
              return {
                ...item,
                randomCode: randomCode(),
              };
            })
          : [];
      return {
        data: list || [],
        total: list.length,
        success: true,
      };
    });
  };

  return (
    <Card
      title='该设备最近登录'
      style={{
        borderBottom: '24px solid #eef0f3',
      }}
    >
      <DragTable>
        <ProTable
          rowKey={'randomCode'}
          actionRef={actionRef}
          toolBarRender={false}
          pagination={pagination}
          request={getTableList}
          columns={deviceColumns}
          search={false}
          scroll={{ x: 1200 }}
          manualRequest
        />
      </DragTable>
    </Card>
  );
};

export default DeviceLoginList;
